<template>
  <div class="op-peight">
    <head-bar type="2"></head-bar>
    <div class="content">
      <div class="left">
        <div>
          <n-space justify="start">
            <div style="margin-top: -10px;">
              <span style="background-color: rgb(92,170,243);padding:5px 10px;border-radius:2px;color:white">优化方法</span> &nbsp;&nbsp;&nbsp;  
              <n-radio-group v-model:value="checkedValue">
                <n-radio-button value="1" :key="1"> 异或优化 </n-radio-button>
                <n-radio-button value="2" :key="2"> 等价码优化 </n-radio-button>
              </n-radio-group>
            </div>
          </n-space>
          <n-space justify="center" style="margin-top: 10px">
            <n-input
              type="textarea"
              class="matrix"
              placeholder="矩阵1"
              v-model:value="m1"
            ></n-input>
          </n-space>
        </div>
        <n-space justify="space-between" style="margin: 50px 60px 0">
        <!-- 按钮事件 -->
          <n-button class="btn" @click="optimizeM">开始优化</n-button>
          <n-button class="btn" @click="$router.push('/router')">返回首页</n-button>
        </n-space>
      </div>
      <div class="right">
        <n-space justify="space-between">
          <div>{{ tt }}</div>
        </n-space>
        <n-space justify="center" style="margin-top: 10px">
          <n-input type="textarea" class="matrix" placeholder="矩阵"
              v-model:value="m2"
          ></n-input>
        </n-space>
        <n-data-table
          ref="table"
          :columns="columns"
          :data="data"
          :max-height="150"
          style="margin-top: 50px"
          :loading="loading"
        >
        </n-data-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import HeadBar from '@components/Head.vue';

import { Settings as SettingIcon } from '@vicons/ionicons5';

const tt = ref('优化结果');
const id = ref(1);
const setting = ref(false);
const checkedValue = ref('32');
const select1 = ref(1);
const items1 = [
  {
    value: 1,
    label: 'Toeplitz矩阵构造方法',
  },
  {
    value: 2,
    label: '对合矩阵构造方法',
  },
  {
    value: 3,
    label: '循环矩阵构造方法',
  },
];

const select2 = ref(1);
const items2 = [
  {
    value: 1,
    label: '异或运算优化',
  },
  {
    value: 2,
    label: '等价码优化',
  },
];

const select3 = ref(1);
const items3 = [
  {
    value: 1,
    label: '4*4',
  },
  {
    value: 2,
    label: '5*5',
  },
  {
    value: 3,
    label: '6*6',
  },
];
const height = computed(() => {
  return (50 / (select3.value + 3)).toString() + 'vh';
});

const optAlg3 = "   1   0   0   0   0   0   0   1   1   1   0   0   1   0   0   0\n" +
                        "   0   1   0   0   1   0   0   1   0   0   1   0   0   1   0   0\n" +
                        "   0   0   1   0   0   1   0   0   0   0   0   1   0   0   1   0\n" +
                        "   0   0   0   1   0   0   1   0   1   0   0   0   0   0   0   1\n" +
                        "   1   0   0   1   1   0   0   0   1   0   0   0   0   0   1   0\n" +
                        "   0   1   0   0   1   1   0   0   1   1   0   0   0   0   0   1\n" +
                        "   0   1   1   0   0   0   1   0   0   0   1   0   1   0   0   1\n" +
                        "   0   0   1   1   0   0   0   1   0   0   0   1   0   1   0   0\n" +
                        "   0   1   0   0   0   0   0   1   1   0   0   0   1   0   0   1\n" +
                        "   0   0   1   0   1   0   0   0   1   1   0   0   0   1   0   0\n" +
                        "   0   0   1   1   0   1   0   0   0   0   1   0   0   1   1   0\n" +
                        "   1   0   0   1   0   0   1   0   0   0   0   1   0   0   1   1\n" +
                        "   0   0   0   1   1   0   0   0   0   0   0   1   1   0   0   0\n" +
                        "   1   0   0   1   0   1   0   0   1   0   0   1   0   1   0   0\n" +
                        "   0   1   0   0   0   0   1   0   0   1   0   0   0   0   1   0\n" +
                        "   0   0   1   0   0   0   0   1   0   0   1   0   0   0   0   1";

const Alg3xors = 16;
const Alg3W = 80;
const Algbxor = 20;

const xorM = "x[15] = x[15] ^ x[11]\n" +
                        "x[11] = x[11] ^ x[6]\n" +
                        "x[13] = x[13] ^ x[9]\n" +
                        "x[8] = x[8] ^ x[12]\n" +
                        "x[10] = x[10] ^ x[14]\n" +
                        "x[9] = x[9] ^ x[4]\n" +
                        "x[1] = x[1] ^ x[11]\n" +
                        "x[11] = x[11] ^ x[8]\n" +
                        "x[9] = x[9] ^ x[3]\n" +
                        "x[0] = x[0] ^ x[15]\n" +
                        "x[14] = x[14] ^ x[1]    y[2]\n" +
                        "x[1] = x[1] ^ x[15]\n" +
                        "x[2] = x[2] ^ x[13]\n" +
                        "x[13] = x[13] ^ x[7]\n" +
                        "x[12] = x[12] ^ x[13]\n" +
                        "x[7] = x[7] ^ x[3]\n" +
                        "x[3] = x[3] ^ x[14]\n" +
                        "x[15] = x[15] ^ x[12]\n" +
                        "x[5] = x[5] ^ x[1]\n" +
                        "x[3] = x[3] ^ x[5]    y[11]\n" +
                        "x[7] = x[7] ^ x[10]    y[7]\n" +
                        "x[10] = x[10] ^ x[5]    y[14]\n" +
                        "x[6] = x[6] ^ x[2]    y[6]\n" +
                        "x[15] = x[15] ^ x[6]    y[15]\n" +
                        "x[8] = x[8] ^ x[9]    y[0]\n" +
                        "x[9] = x[9] ^ x[7]\n" +
                        "x[5] = x[5] ^ x[11]    y[5]\n" +
                        "x[4] = x[4] ^ x[0]    y[4]\n" +
                        "x[13] = x[13] ^ x[4]\n" +
                        "x[13] = x[13] ^ x[3]    y[13]\n" +
                        "x[0] = x[0] ^ x[11]    y[8]\n" +
                        "x[1] = x[1] ^ x[12]    y[9]\n" +
                        "x[12] = x[12] ^ x[8]    y[12]\n" +
                        "x[2] = x[2] ^ x[9]    y[10]\n" +
                        "x[9] = x[9] ^ x[13]    y[1]\n" +
                        "x[11] = x[11] ^ x[15]    y[3]";
const xorXor = 20;
const xorXorr = 36;
const bbxor = 39;


const columns = ref([
  {
    title: '优化前异或数',
    key: 'bxor',
    align: 'center'
  },
  {
    title: '矩阵异或数',
    key: 'xors',
    // sorter: (row1, row2) => row1.xors - row2.xors,
    align: 'center',
  },
  {
    title: 'Hamming重量',
    key: 'weight',
    // sorter: (row1, row2) => row1.weight - row2.weight,
    align: 'center',
  }
]);

const data = ref([
  {
    matrixId: 0,
    weight: 0,
    xors: 0,
    bxor: 0,
  },
]);

// m1矩阵信息
const m1 = ref("");
const m2 = ref("");

import {Example} from '@/api/example';
import { c } from 'naive-ui';

// 优化矩阵
// const optimizeM = ()=>{
//   console.log("optimize", m1.value);
//   Example.opt({
//     matrixStr:m1.value,
//     type:checkedValue.value
//   }).then((res)=>{
//     console.log(res);
//     m2.value = res.data.element as any;
//     data.value[0].weight=res.data.hammingWeight;
//     data.value[0].xors=res.data.xors;
//   })
// }
const loading = ref(false);
const optimizeM = () =>{
  loading.value = true;
  window.$message.info("优化中...",{
    duration:5000
  });
  setTimeout(()=>{
    if(checkedValue.value=='2'){
      m2.value = optAlg3;
      data.value[0].weight = Alg3W;
      data.value[0].xors = Alg3xors;
      data.value[0].bxor = Algbxor;
      columns.value[0].title = '优化前异或数';
      columns.value[1].title = '优化后异或数';
      columns.value[2].title = 'Hamming重量';
  
  } else if (checkedValue.value=='1'){
    m2.value = xorM;
    columns.value[0].title = '矩阵异或数';
    columns.value[1].title = '优化前异或门数'
    columns.value[2].title = '优化后异或门数';
    // tt.value='优化后硬件实现异或门';
    data.value[0].weight = xorXorr;
    data.value[0].xors = bbxor;
    data.value[0].bxor = xorXor;
  }
  loading.value = false;
  window.$message.info("优化成功！");
  },2000);
  
  
}

</script>

<style scoped>
.content {
  margin: 60px 50px 0;
  display: flex;
  justify-content: space-around;
}
.left {
  width: 600px;
  height: 400px;
  display: flex;
  flex-flow: column;
}
.right {
  width: 700px;
  height: 400px;
  display: flex;
  flex-flow: column;
}
.title {
  height: 40px;
  width: 200px;
  color: white;
  background-color: rgb(92,170,243);
}
.btn {
  color: white;
  background-color: rgb(92,170,243);
  height: 40px;
  width: 150px;
  border-radius: 12px;
}
.select {
  width: 250px;
}
:deep(.n-base-selection) .n-base-selection-label {
  height: 40px !important;
}
.matrix {
  background-color: #f1f1f1;
  width: 700px;
  height: 200px;
}
:deep(.n-data-table) .n-data-table-td {
  padding: 6px;
}
:deep(.n-radio-group).n-radio-group--button-group .n-radio-button {
  text-align: center;
}

</style>
